var posA=-1, posB=-1, posC=-1, posD=-1;
var titleA, titleB, titleC, titleD;
var summaryA, summaryB, summaryC, summaryD;
var infowindowA, infowindowB, infowindowC, infowindowD;
var listitemA, listitemB, listitemC, listitemD;
var pinA=new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|f0746a|");
var pinB=new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=B|f0746a|");
var pinC=new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=C|f0746a|");
var pinD=new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=D|f0746a|");
function loadMap(idx){
	$(".map-container").html("");
	$.getJSON('assets/data/farmer.json', function(data){
	    $.each(data.farmers, function(index, farmer){
			if(index==idx[0]){
				posA=new google.maps.LatLng(farmer.latitude,farmer.longitude);
				titleA=farmer.name;
				summaryA=farmer.extension+"<br/>"+farmer.summary;
				listitemA=$(".list-item:eq("+index+")");
			}
			if(index==idx[1]){
				posB=new google.maps.LatLng(farmer.latitude,farmer.longitude);
				titleB=farmer.name;
				summaryB=farmer.extension+"<br/>"+farmer.summary;
				listitemB=$(".list-item:eq("+index+")");
			}
			if(index==idx[2]){
				posC=new google.maps.LatLng(farmer.latitude,farmer.longitude);
				titleC=farmer.name;
				summaryC=farmer.extension+"<br/>"+farmer.summary;
				listitemC=$(".list-item:eq("+index+")");
			}
			if(index==idx[3]){
				posD=new google.maps.LatLng(farmer.latitude,farmer.longitude);
				titleD=farmer.name;
				summaryD=farmer.extension+"<br/>"+farmer.summary;
				listitemD=$(".list-item:eq("+index+")");
			}
		});
	}).done(function(){
		var infowindowA = new google.maps.InfoWindow({
			content: "<div style='text-decoration:none; width:190px'>"+
						"<p style='font-size: 14px; color:#4880dc'>"+titleA+"</p>"+
						 summaryA+
					 "</div>"
		});
		var infowindowB = new google.maps.InfoWindow({
			content: "<div style='text-decoration:none; width:190px'>"+
						"<p style='font-size: 14px; color:#4880dc'>"+titleB+"</p>"+
						 summaryB+
					 "</div>"
		});
		var infowindowC = new google.maps.InfoWindow({
			content: "<div style='text-decoration:none; width:190px'>"+
						"<p style='font-size: 14px; color:#4880dc'>"+titleC+"</p>"+
						 summaryC+
					 "</div>"
		});
		var infowindowD = new google.maps.InfoWindow({
			content: "<div style='text-decoration:none; width:190px'>"+
						"<p style='font-size: 14px; color:#4880dc'>"+titleD+"</p>"+
						 summaryD+
					 "</div>"
		});
		function initialize(){
			var mapProp = {
				center: posA,
				zoom:10,
				mapTypeId:google.maps.MapTypeId.ROADMAP
			};
			var map = new google.maps.Map(document.getElementsByClassName("map-container")[0],mapProp);
			if(posA!=-1){
				var markerA = new google.maps.Marker({
					position: posA,
					icon: pinA
				});
				markerA.setMap(map);
				addMarkEvent(infowindowA,markerA);
				addListItemEvent(listitemA,markerA);
				posA=-1;
			}
			if(posB!=-1){
				var markerB = new google.maps.Marker({
					position: posB,
					icon: pinB
				});
				markerB.setMap(map);
				addMarkEvent(infowindowB,markerB);
				addListItemEvent(listitemB,markerB);
				posB=-1;
			}
			if(posC!=-1){
				var markerC = new google.maps.Marker({
					position: posC,
					icon: pinC
				});
				markerC.setMap(map);
				addMarkEvent(infowindowC,markerC);
				addListItemEvent(listitemC,markerC);
				posC=-1;
			}
			if(posD!=-1){
				var markerD = new google.maps.Marker({
					position: posD,
					icon: pinD
				});
				markerD.setMap(map);
				addMarkEvent(infowindowD,markerD);
				addListItemEvent(listitemD,markerD);
				posD=-1;
			}
			google.maps.event.addListener(map, 'mouseout', function() {
				infowindowC.close();
				infowindowA.close();
				infowindowB.close();
				infowindowD.close();
			});
			function addListItemEvent(listitem,marker){
				listitem.hover(
					function(){
						showDialog(marker);
						listitem.find(".item-container").css({"box-shadow":"5px 5px 5px #999"});
						listitem.find(".item-image img").css({"box-shadow":"5px 5px 5px #999"});
					},function(){
						hideDialogues();
						listitem.find(".item-container").css({"box-shadow":"none"});	
						listitem.find(".item-image img").css({"box-shadow":"none"});
					}
				);
			}
			function addMarkEvent(infowindow,marker){
				google.maps.event.addListener(marker, 'click', function() {
					hideDialogues();
					infowindow.open(map,marker);
				});
			}
			function showDialog(marker){
				google.maps.event.trigger(marker,"click");
				map.panTo(marker.getPosition());
			}
			function hideDialogues(){
				google.maps.event.trigger(map,"mouseout");
			}
		}
		google.maps.event.addDomListener(window, 'load', initialize());
	});
}